<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html lang="zh-cn">
<head>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <include file="Common/head-static"/>
    <style>
        /* 头部导航条 */
        .layui-nav.icy8 {
            background-color: #3c8dbc;
            float: left;
            display: inline-block;
            padding-left: 0;
            border-radius: 0;
            /*border: 1px solid red;*/
        }

        .layui-nav.icy8 .layui-nav-item {
            line-height: 50px;
            border-radius: 0;
        }

        .layui-nav.icy8 .layui-nav-child {
            top: 50px;
        }

        .header-nav {
            display: inline-block;
            width: 100%;
            background-color: #3c8dbc;
            font-size: 0;
        }

        .header-nav .logo {
            line-height: 50px;
            display: inline-block;
            float: left;
            min-width: 220px;
            color: white;
            background-color: #367fa9;
        }

        /* 左侧导航树 */
        .left-nav {
            position: absolute;
            top: 50px;
            bottom: 0px;
            left: 0;
            z-index: 2;
            background-color: #222d32;
            width: 220px;
            max-width: 220px;
            overflow: auto;
            overflow-x: hidden;
            border-right: 1px solid #e5e5e5;
            font-size: 0;
        }

        .left-nav .left-nav-item {
            overflow: hidden;
            text-align: left;
            margin: 0;
            border: 0;
            -moz-border-radius: 0;
            -webkit-border-radius: 0;
            border-radius: 0;
            border-top: solid 1px #2c3b41;
            cursor: pointer;
            font-size: 12px;
        }

        .left-nav .left-nav-item > a {
            display: inline-block;
            padding: 10px;
            width: 100%;
            color: #b8c7ce;
            filter: none;
            border-left: 3px #222d32 solid;
            -moz-user-select: none;
            -webkit-user-select: none;
            -ms-user-select: none;
            transition: all 0.1s;
            -moz-transition: all 0.1s; /* Firefox 4 */
            -webkit-transition: all 0.1s; /* Safari 和 Chrome */
            -o-transition: all 0.1s; /* Opera */
        }

        .left-nav .left-nav-item > a > .dir {
            transition: all 0.3s;
            -moz-transition: all 0.3s; /* Firefox 4 */
            -webkit-transition: all 0.3s; /* Safari 和 Chrome */
            -o-transition: all 0.3s; /* Opera */
            float: right;
            display: inline-block;
        }

        .left-nav .left-nav-item > a:hover, .left-nav .left-nav-item > a.on {
            color: #ffffff;
            background: #1e282c;
            border-left: 3px #3c8dbc solid;
        }

        .left-nav .left-nav-item .left-nav-child {
            background: #2c3b41;
            display: none;
            /*padding-left: 15px;*/
        }

        .left-nav .left-nav-item .left-nav-child .item > a {
            padding-left: 30px;
            width: 100%;
            display: inline-block;
            padding-top: 10px;
            padding-bottom: 10px;
            color: #b8c7ce;
            -moz-user-select: none;
            -webkit-user-select: none;
            -ms-user-select: none;
        }

        .left-nav .left-nav-item > a > span,
        .left-nav .left-nav-item .left-nav-child .item > a > span {
            font-weight: bolder;
            display: inline-block;
            padding: 0 2px;
            font-size: 10px;
        }

        .left-nav .left-nav-item .left-nav-child .item > a:hover {
            background: #1e282c;
            color: #fff;
        }

        /* 右侧容器 */
        .page-content {
            position: absolute;
            top: 50px;
            right: 0;
            bottom: 42px;
            left: 221px;
            overflow: hidden;
            z-index: 1;
        }

        @media screen and (max-width: 768px) {
            .left-nav {
                display: none;
            }

            .page-content {
                border: 1px solid red;
                left: 0;
            }
        }
        /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
        ::-webkit-scrollbar
        {
            width: 8px;
            height: 8px;
            background-color: #F5F5F5;
        }

        /*定义滚动条轨道 内阴影+圆角*/
        ::-webkit-scrollbar-track
        {
            -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
            border-radius: 5px;
            background-color: #F5F5F5;
            cursor: pointer;
        }

        /*定义滑块 内阴影+圆角*/
        ::-webkit-scrollbar-thumb
        {
            border-radius: 5px;
            -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
            background-color: #555;
        }
    </style>
    <title>{$web['web_title']}</title>
</head>
<body class="layui-border-box">
<div class="header-nav">
    <div class="logo pl10 font15">
        <span class="layui-icon layui-icon-component font15"></span> 项目管理
    </div>
    <ul class="layui-nav icy8">
        <li class="layui-nav-item"><a href="">最新活动</a></li>
        <li class="layui-nav-item layui-this"><a href="">产品</a></li>
        <li class="layui-nav-item"><a href="">大数据</a></li>
        <li class="layui-nav-item">
            <a href="javascript:;">解决方案</a>
            <dl class="layui-nav-child"> <!-- 二级菜单 -->
                <dd><a href="">移动模块</a></dd>
                <dd><a href="">后台模版</a></dd>
                <dd><a href="">电商平台</a></dd>
            </dl>
        </li>
        <li class="layui-nav-item"><a href="">社区</a></li>
    </ul>
</div>
<ul class="left-nav">
    <li class="left-nav-item">
        <a class="">
            <span class="layui-icon layui-icon-username"></span> 菜单一
            <div class="layui-icon layui-icon-triangle-d dir"></div>
        </a>
        <ul class="left-nav-child">
            <li class="item">
                <a class="">
                    <span class="layui-icon layui-icon-console"></span> 菜单一
                </a>
                <ul class="left-nav-child">
                    <li class="item">
                        <a class="">子菜单一</a>
                    </li>
                </ul>
            </li>
            <li class="item">
                <a class="">菜单一</a>
            </li>
            <li class="item">
                <a class="">菜单一</a>
            </li>
            <li class="item">
                <a class="">菜单一</a>
            </li>
            <li class="item">
                <a class="">菜单一</a>
            </li>
        </ul>
    </li>
    <li class="left-nav-item">
        <a class="">
            <span class="layui-icon layui-icon-theme"></span> 菜单二
            <div class="layui-icon layui-icon-triangle-d dir"></div>
        </a>
        <ul class="left-nav-child">
            <li class="item">
                <a class="">
                    <span class="layui-icon layui-icon-console"></span> 菜单一
                </a>
            </li>
            <li class="item">
                <a class="">菜单一</a>
            </li>
            <li class="item">
                <a class="">菜单一</a>
            </li>
            <li class="item">
                <a class="">菜单一</a>
            </li>
            <li class="item">
                <a class="">菜单一</a>
            </li>
        </ul>
    </li>
    <li class="left-nav-item">
        <a class="">
            <span class="layui-icon layui-icon-console"></span> 菜单三
            <div class="layui-icon layui-icon-triangle-d dir"></div>
        </a>
        <ul class="left-nav-child">
            <li class="item">
                <a class="">
                    <span class="layui-icon layui-icon-console"></span> 菜单一
                </a>
            </li>
            <li class="item">
                <a class="">菜单一</a>
            </li>
            <li class="item">
                <a class="">菜单一</a>
            </li>
            <li class="item">
                <a class="">菜单一</a>
            </li>
            <li class="item">
                <a class="">菜单一</a>
            </li>
        </ul>
    </li>
</ul>
<div class="page-content">
    fssf
</div>
<block name="body"></block>
<script type="text/javascript">
    layui.use('element');
    $('.left-nav .left-nav-item > a').on('click', function () {
        var child = $(this).siblings('.left-nav-child');
        var p = $(this).parent();
        if (child.is(':hidden')) {
            child.slideDown();
            $('.dir', this).css('transform', 'rotateX(180deg)');
        } else {
            child.slideUp();
            $('.dir', this).css('transform', 'rotateX(0deg)');
        }
        $(this).parent()
            .siblings()
            .children('a')
            .removeClass('on');
        $(this).addClass('on');
        return false;
    });
</script>
</body>
</html>